<template>
    <page-main title="考核评定" title-icon="dashboard">
        <div class="assess">
            <div class="assess-detail">
                <div class="assess-detail-header flex justify-between align-center">
                    <div class="detail-header-left">
                        组件-王二
                    </div>
                    <div class="detail-header-right">
                        <el-button type="primary" round style="width: 100px;" size="small" @click="getDetail">详情
                        </el-button>
                    </div>
                </div>
                <div class="assess-score">
                    <el-row :gutter="20" type="flex" align="middle">
                        <el-col :md="10">
                            <el-card header="平时成绩" shadow="none">
                                <div class="score-list flex justify-between align-center">
                                    <ul>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                    </ul>
                                    <h1>20</h1>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :md="11">
                            <el-card header="期末成绩" shadow="none">
                                <div class="score-list flex justify-between align-center">
                                    <ul>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                        <li>日报： 应完成:<span>10</span> 已完成：<span>23</span></li>
                                    </ul>
                                    <h1>20</h1>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :md="3">
                            <div class="assess-count" style="text-align: center;">
                                <h1>88</h1>
                                <el-button type="primary">成绩提交</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'

export default {
    name: 'Detail',
    components: {PageMain},
    methods: {
        getDetail() {
            this.$router.push('/examine/index/staff/detail?name=测试')
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .el-card {
        border: none;
    }
}
.assess-detail-header {
    background: #f5f5f5;
    padding: 15px;
}
.score-list {
    ul {
        li {
            margin-bottom: 25px;
            span {
                border: 1px solid #dedede;
                margin: 10px;
                padding: 5px 8px;
                border-radius: 6px;
            }
        }
    }
    h1 {
        font-size: 40px;
        letter-spacing: 1px;
    }
}
</style>
